zeek31.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advance Selectors in CSS</title>
</head>
<style>
/* div p{ background-color: burlywood;} */
/* div li p{background-color: cyan;} */
/* div>p{background-color: rgb(247, 247, 125);} */
/* div+p{background-color: violet;} */
strong{font-size: 20px;color: rgb(50, 42, 165);background-color: rgb(220, 251, 255);}
</style>
<body>
<div class="container">
<div class="class">
<ul>
<li> <p> This is a para.(Selected by div p)(Selected by div li p)</p></li>
<p>This is 2nd para.(Selected by div p)</p>
</ul> <p>This is 3rd para.(Selected by div p)(Selected by div>p)</p>
</div>
<p>This is 4th para.(Selected by div p)(Selected by div>p)(Selected by div+p)</p>
</div>
<p>This is 5th para.(Selected by div+p)</p>
<h1 style="color: blue;">How selectors Work</h1> <hr>
<p><strong>div p:</strong> <br>It works when there is a para anywhere inside the
division. <hr> </p>
<p><strong>div li p:</strong> <br>It works when there is a list element anywhere
inside div and inside this list element there is a para anywhere.<hr></p>
<p><strong>div>p:</strong> <br>It works when there is a para <em>directly</em>
under div.<hr></p>
<p><strong>div+p:</strong><br>It works when there is para <em>after</em> div block
ends.<hr> </p>
</body>
</html>
Comments
Post a Comment